<template>
<div class="mui-numbox">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input class="mui-input-numbox" type="number" :value="n" @change="changeNum" ref="ipt"/>
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</template>
<script>
export default {
    props:["n","id"],
   computed:{
       num(){
           return this.n
       }
    },
    methods:{
        changeNum(){
           if(this.$refs.ipt.value<0){
                this.$refs.ipt.value=0
            };
            this.$store.commit("updateCount",{count:this.$refs.ipt.value,id:this.id})
        }
    }
}
</script>

<style scoped>
    .mui-numbox{
        height: 30px;
    }
</style>